/**
  * Coffee
  *
  * @author jh3y - jheytompkins.com
*/

$size: 40px;
$color: #fff;
$no-of-fume: 3;

@keyframes coffee {
  100% {
    opacity: 0;
    transform: translateY(-200%);
  }
}

.coffee {
  background: $color;
  display: grid;
  border-radius: ($size * .1);
  grid-template-columns: repeat($no-of-fume, 1fr);
  grid-template-rows: 1fr;
  height: $size;
  position: relative;
  width: $size;
  padding: 2px;
  justify-items: center;

  &:before {
    box-sizing: border-box;
    content: '';
    height: ($size * .65);
    width:  ($size / 2);
    border: ($size * .1) solid $color;
    position: absolute;
    top: 50%;
    margin-top: -(($size * .65) / 2);
    margin-left: -($size / 4);
    left: 100%;
    border-radius: ($size * .1);
  }

  div {
    height: ($size / 2);
    width: ($size / 5);
    background: #fff;
    opacity: .3;
    animation: coffee 2s infinite;
  }

  @for $fume from 1 through $no-of-fume {
    $margin: 2px;
    $left: ($size / 10) + $margin;
    div:nth-child(#{$fume}) {
      animation-delay: random(10) * .1s;
    }
  }
}
